<template>
	
	<div id="app">
			<div class="echarts">
				<avue-data-box :option="option"></avue-data-box>
			</div>
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="2.5">
					<el-table  :data="tableData" stripe  
							style="width: 100%; font-size: 18px; margin-left: 7px;" border align= "center" >
						<el-table-column  prop="name"  label="昨日进件"  width="180" align= "center" >
							<el-table-column  prop = "user_name" label = "姓名"  width = "100" align = "center"></el-table-column>
							<el-table-column	prop = "count"	label = "户数 (个)"	 width = "120" align = "center"></el-table-column>
						</el-table-column>
					</el-table>
				</el-col >
				<el-col :span="2.5">
					<el-table  :data="tableParts" stripe  
							style="width: 100%; font-size: 18px;"  border align= "center">
						<el-table-column  prop="name"  label="昨日面签"  width="180" align= "center" >
							<el-table-column  prop = "mgr_name" label = "客户经理"  width = "100" align = "center"></el-table-column>
							<el-table-column	prop = "number"	label = "户数 (个)"	 width = "120" align = "center"></el-table-column>
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span = "2.5">
					<el-table :data="mapList" stripe  
							style="width: 100%;font-size: 18px;" border align= "center">
						<el-table-column  prop="address"  label="累计面签" align= "center">
							<el-table-column  prop = "branch_name" label = "支行"  width = "120" align = "center"></el-table-column>
							<el-table-column	prop = "apply_num"	label = "户数 (个)"	 width = "120" align = "center"></el-table-column>
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span="4.5">
					<el-table  :data="cumulativeList" stripe  
							style="width: 100%;font-size: 18px;" border align= "center">
						<el-table-column    label = "用信"  width = "100" align = "center">
							<el-table-column  prop = "branch_name" label = "支行"  width = "100" align = "center"></el-table-column>
							<el-table-column	prop = "approval_num"	label = "户数 (个)"	 width = "120" align = "center"></el-table-column>
							<el-table-column	prop = "ln_bal"	label = "金额（元）"	width = "120" align = "center"></el-table-column>
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span="6">
					<dv-scroll-board :config="config" style="width:400px;height:220px;text-align: center;" />
				</el-col>
			</el-row>
			<div class="top">
				<el-row  type="flex" class="row-bg" justify="space-between">
					<el-col :span="14">
						<div id="myChart" :style="{width: '900px', height: '400px'}"></div>
					</el-col>
					<el-col :span="10">
						<div id="main" :style="{width: '700px', height: '400px'}"></div>
					</el-col>
				</el-row>
			</div>
			
	</div>
	
</template>

<script>
import {applyMainlist,dynamicMsg,lncomingPartsList,mapList,getUseLetter,getEcharts} from '@/api/api'

export default {
  name: 'App',
  
	data(){
		return {
			config: {
        headerBGC: '#eb5a6d', // 表头背景色
        waitTime: 2000, // 轮播时间间隔(ms)
        header: [], // 表头数据
        data: [],  // 数据展示
        index: true,  // 显示行号
        columnWidth: [80], // 列宽度
        align: ['center'] // 列对齐方式
      },
			option: {
				span:6,
				data: [
					{
						title: '目标',
						count: 12332,
						icon: 'el-icon-warning',
						color: 'rgb(49, 180, 141)'
					},
					{
						title: '完成',
						count: 33,
						icon: 'el-icon-view',
						color: 'rgb(56, 161, 242)'
					},
					{
						title: '差距',
						count: 2223,
						icon: 'el-icon-info',
						color: 'rgb(117, 56, 199)'
					},
					{
						title: '期限',
						count: 20,
						icon: 'el-icon-success',
						color: 'rgb(199, 4, 7)'
					},
				]
			},
			datacharts: [],
			echartsName: [],
			tableData: [],
			tableParts: [], 
			mapList: [],// 累计面签
			cumulativeList: [], //用信
			refuseNum: [], //拒绝情况户数
			lnBalNum: [], //用信户数
			waitingFaceNum: [], //等待面签
		}
  },
	mounted(){
		this.addEchas();
		this.listTo();
	},
	methods: {
		drawLine(){
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
						
						tooltip: {
								trigger: 'axis',
								axisPointer: {
										type: 'shadow'
								}
						},
						grid: {
								left: '0%',
								right: '0%',
								bottom: '10%',
								top:'10%',
								containLabel: true
						},
						calculable: true,
						
						xAxis: {
								type: 'category',
								axisTick: {show: false},
								axisLabel: {
									interval:0,  
									rotate:40  
								},
								data: this.echartsName
						},
						yAxis: {
							type: 'value',
							
						},
						series: [
							{
								name: '面签户数',
								type: 'bar',
								barGap: 0,
								data: this.datacharts,
								label: {
									show: false, // 开启显示
									rotate: 0, // 旋转70度
									position: 'top', // 在上方显示
									distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
									verticalAlign: 'middle',
									textStyle: { // 数值样式
										color: 'black',
										fontSize: 12
									}
								}
							},
							{
								name: '拒绝户数',
								type: 'bar',
								data: this.refuseNum,
								label: {
									show: false, // 开启显示
									rotate: 0, // 旋转70度
									position: 'top', // 在上方显示
									distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
									verticalAlign: 'middle',
									textStyle: { // 数值样式
										color: 'black',
										fontSize: 12
									}
								}
							},
							{
								name: '用信户数',
								type: 'bar',
								data: this.datacharts,
								label: {
									show: false, // 开启显示
									rotate: 0, // 旋转70度
									position: 'top', // 在上方显示
									distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
									verticalAlign: 'middle',
									textStyle: { // 数值样式
										color: 'black',
										fontSize: 12
									}
								}
							},
							{
								name: '待面签数',
								type: 'bar',
								data: this.waitingFaceNum,
								label: {
									show: true, // 开启显示
									rotate: 0, // 旋转70度
									position: 'top', // 在上方显示
									distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
									verticalAlign: 'middle',
									textStyle: { // 数值样式
										color: 'black',
										fontSize: 12
									}
								}
							},
						]
				});
		},
		addEchas() {
			var chartDom = document.getElementById('main');
			var myChart = this.$echarts.init(chartDom);
			var option;
			option = {
				title: {
					text: 'Rainfall vs Evaporation',
					subtext: 'Fake Data'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Rainfall', 'Evaporation']
				},
				toolbox: {
					show: true,
					feature: {
						dataView: { show: true, readOnly: false },
						magicType: { show: true, type: ['line', 'bar'] },
						restore: { show: true },
						saveAsImage: { show: true }
					}
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						// prettier-ignore
						data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: 'Rainfall',
						type: 'bar',
						data: [
							2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
						],
						markPoint: {
							data: [
								{ type: 'max', name: 'Max' },
								{ type: 'min', name: 'Min' }
							]
						},
						markLine: {
							data: [{ type: 'average', name: 'Avg' }]
						}
					},
					{
						name: 'Evaporation',
						type: 'bar',
						data: [
							2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
						],
						markPoint: {
							data: [
								{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
								{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
							]
						},
						markLine: {
							data: [{ type: 'average', name: 'Avg' }]
						}
					}
				]
			};
			
			option && myChart.setOption(option);
		},
		listTo() {
			
			// 用信
			getUseLetter().then(res => {
				this.cumulativeList = res;
			})
			
			//柱状图
			getEcharts().then(res => {
				for(var date of res) {
					//成功面签户数
					this.datacharts.push({value: date.pass_num}) 
					this.echartsName.push(date.branch_name)
					//用信户数
					this.lnBalNum.push({value: date.ln_bal_num})
					//拒绝户数
					this.refuseNum.push({value: date.refuse_num})
					
					//waiting_face_num待面签户数
					this.waitingFaceNum.push({value: date.waiting_face_num})
					
				}
				this.drawLine();
			})
			
			// 昨天面签前X
			applyMainlist().then(res => {
				this.tableData = res;
			})
			// 昨天进件前X条
			lncomingPartsList().then(res => {
			this.tableParts = res;
				
			})
			// 网点进件
			mapList().then(res =>{
				this.mapList = res;
			})
			//业务动态
			dynamicMsg().then(res => {
				var arr = [];
				this.config.data = res
				for(var data in res) {
						var time = res[data].show_time
						var name = res[data].show_txt
						arr.push([this.getMyDate(time),name])
				}
				let nowData = this.config
				nowData.data = arr
				this.config = {...nowData}
			})
		},
		//时间格式装换
		getMyDate(str) {
			let oDate = new Date(str),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth() + 1,
			oDay = oDate.getDate(),
			oHour = oDate.getHours(),
			oMin = oDate.getMinutes(),
			oSen = oDate.getSeconds(),
			oTime = oYear + '-' + this.addZero(oMonth) + '-' + this.addZero(oDay) + ' ' + this.addZero(oHour) + ':' +
					this.addZero(oMin) + ':' + this.addZero(oSen);
			return oTime;
		},
		addZero(num) {
			if (parseInt(num) < 10) {
					num = '0' + num;
			}
			return num;
		},
	}
}

</script>

<style >
	#app {
		margin: 0px;
		padding: 0px;
		text-align: center;
		color: #2c3e50;
		background-color: #c5d3da;
		
	}
	.top {
			margin-top: 50px;
		}
	.echarts {
		padding-top: 10px;
	}
</style>
